/**
 * Created by fanweihua on 2016/12/1.
 */
import React from 'react';
import UploaderHtml from './uploaderHtml.js';

const UploaderNav = React.createClass({
    getInitialState: function () {
        return {
            backgroundImage: 'url(/bower_components/weui-master/example/images/pic_160.png)'
        }
    },
    componentDidMount: function () {
        $(".page__bd li").css({
            'margin': 0
        });
        $(".weui-uploader__file").css({
            'margin-right': '9px',
            'margin-bottom': '9px'
        });
        UploaderHtml._go();
    },
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <h1 className="page__title">Uploader</h1>
                    <p className="page__desc">上传组件，一般配合<a className="link" href="#gallery">组件Gallery</a>来使用。</p>
                </div>
                <div className="page__bd">
                    <div className="weui-gallery" id="gallery">
                        <span className="weui-gallery__img" id="galleryImg"></span>
                        <div className="weui-gallery__opr">
                            <a href="javascript:" className="weui-gallery__del">
                                <i className="weui-icon-delete weui-icon_gallery-delete"></i>
                            </a>
                        </div>
                    </div>
                    <div className="weui-cells weui-cells_form">
                        <div className="weui-cell">
                            <div className="weui-cell__bd">
                                <div className="weui-uploader">
                                    <div className="weui-uploader__hd">
                                        <p className="weui-uploader__title">图片上传</p>
                                        <div className="weui-uploader__info">0/2</div>
                                    </div>
                                    <div className="weui-uploader__bd">
                                        <ul className="weui-uploader__files" id="uploaderFiles">
                                            <li className="weui-uploader__file"
                                                style={{backgroundImage: this.state.backgroundImage}}></li>
                                            <li className="weui-uploader__file"
                                                style={{backgroundImage: this.state.backgroundImage}}></li>
                                            <li className="weui-uploader__file"
                                                style={{backgroundImage: this.state.backgroundImage}}></li>
                                            <li className="weui-uploader__file weui-uploader__file_status"
                                                style={{backgroundImage: this.state.backgroundImage}}>
                                                <div className="weui-uploader__file-content">
                                                    <i className="weui-icon-warn"></i>
                                                </div>
                                            </li>
                                            <li className="weui-uploader__file weui-uploader__file_status"
                                                style={{backgroundImage: this.state.backgroundImage}}>
                                                <div className="weui-uploader__file-content">50%</div>
                                            </li>
                                        </ul>
                                        <div className="weui-uploader__input-box">
                                            <input id="uploaderInput" className="weui-uploader__input" type="file"
                                                   accept="image/*" multiple=""></input>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});

const Uploader = React.createClass({
    getInitialState: function () {
        return {
            html: UploaderHtml.html,
            javaScriptHtml: UploaderHtml.javaScriptHtml
        }
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                        <div dangerouslySetInnerHTML={{__html: this.state.javaScriptHtml}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <UploaderNav></UploaderNav>
                    </div>
                </div>
            </div>
        );
    }
});
module.exports = Uploader;